<!-- 试卷管理 -->
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { reactive, ref, onMounted, provide } from "vue"
import { Query, Cards } from "./modules/paper"
import { getExamListApi, delExamPaperApi } from "#/api/manage/paper"
import { trimStringParams } from '#/utils/trimStringParams'

const loading = ref(false)
const queryData = reactive({
  name: ''
})
const tableData = ref()
const pageData = reactive({
  total: 0,
  curPage: 1,
  pageSize: 10
})

provide('dealTableData', {
  deletePaperData: (papersId: any) => {
    deletePaper(papersId)
  }
});
const deletePaper = (papersId: any) => {
  loading.value = true
  delExamPaperApi({ papersId }).then(() => {
    loading.value = false
    onQuery()
  }).finally(() => {
    loading.value = false
  })
}

const onQuery = () => {
  loading.value = true
  const params = {
    curPage: pageData.curPage,
    pageSize: pageData.pageSize
  } as any
  const trinsParamsData = trimStringParams(queryData)
  Object.keys(trinsParamsData).forEach(key => {
    const kVal = trinsParamsData[key as keyof typeof trinsParamsData]
    if (kVal) {
      params[key] = kVal
    }
  })
  getExamListApi(params).then((res) => {
    loading.value = false
    const { data, pageInfo } = res
    tableData.value = data
    pageData.total = pageInfo?.totalRows
  }).finally(() => {
    loading.value = false
  })
}

const handleSizeChange = (val: number) => {
  pageData.pageSize = val
  pageData.curPage = 1
  onQuery()
}
const handleCurrentChange = (val: number) => {
  pageData.curPage = val
  onQuery()
}

onMounted(() => {
  onQuery()
});

</script>
<template>
  <Page class="h-full">
    <div v-loading="loading" class="h-full flex flex-col bg-[#fff] p-[24px] rounded-[8px]">
      <Query v-model="queryData" class="mb-[12px]" @queryData="onQuery"></Query>
      <Cards :tableList="tableData" class="flex-1 overflow-auto"></Cards>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="pagination pt-[15px]"
        size="small" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]"
        :page-size="pageData.pageSize" :total="pageData.total"></el-pagination>
    </div>
  </Page>
</template>
<style scoped></style>
